<template>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
        <p v-for="(item, index) in loadedData" :key="index">{{ item.msg }}</p>
    </van-list>
</template>

<script>
export default {
    name: "LazyLoading",
    props: ["content"],
    data() {
        return {
            //显示加载提示
            loading: false,

            //是否加载数据完成
            finished: false,

            //总数据量
            myData: [],

            //加载数据量
            count: 1,

            //数据偏移量
            offset: 0,

            //已加载的数据量
            loadedData: [],

            //函数防抖定时器序号
            timer: null,
        };
    },

    created() {
        //创建初始化数据
        for (let i = 0; i < 200; i++) {
            this.myData.push({
                msg: "数据" + i + 1,
            });
        }
        setTimeout(() => {
            // this.myData = this.content;
        }, 100);
    },

    methods: {
        initLoad() {
            let data = this.myData.slice(this.offset, this.offset + this.count);

            this.loadedData.push(...data);

            this.offset += this.count;

            this.loading = false;

            setTimeout(() => {
                //如果本次数据加载不足this.count【30条数据】, 则说明数据已加载完毕, 则将this.finished设置为true
                if (data.length < this.count) {
                    this.finished = true;
                } else {
                    this.laoding = true;
                }
            }, 600);
        },

        //每次触底加载数据方法
        loadData() {
            //

            //函数防抖控制触发频率
            if (this.timer) {
                clearTimeout(this.timer);
            }

            this.timer = setTimeout(() => {
                this.timer = null;

                this.initLoad();
            }, 1000);
        },
    },
};
</script>

<style lang="less" scoped></style>
